<template>
    <div style="background-image: linear-gradient( 109.6deg,  rgba(25,170,209,1) 11.3%, rgba(21,65,249,1) 69.9% )">
        <div class="glass">
            <ul class="dock">
                <li @click="openNote" class="el-icon-edit"></li>
                <li @click="openVSCode" class="el-icon-monitor"></li>
                <li @click="openIframe('应用市场', 'https://st.xiaotao233.top/')" class="el-icon-goods"></li>
            </ul>
        </div>
    </div>
</template>

<script>
import Note from './Note.vue'
import VsCodeMini from '../components/VsCodeMini.vue'
import Iframe from '../components/Iframe.vue'
export default {
    data() {
        return {
            value: '',
            snippet: {},
            filesManagerData: []
        }
    },
    mounted() {
        this.dockInit()
    },
    methods: {
        updateSnippet() {

        },
        openIframe(name, url) {
            const xxArea = ['50%', '70%']
            this.$layer.iframe({
                content: {
                    content: Iframe, // 传递的组件对象
                    parent: this, // 当前的vue对象
                    data: {
                        url: url
                    }// props
                },
                offset: 'auto',
                shade: false,
                area: xxArea,
                title: name,
                resize: true,
                cancel: () => { // 关闭事件

                }
            })
        },
        openVSCode() {
            const xxArea = ['50%', '70%']
            this.$layer.iframe({
                content: {
                    content: VsCodeMini, // 传递的组件对象
                    parent: this, // 当前的vue对象
                    data: {
                        note: '测试桌面笔记'
                    }// props
                },
                offset: 'auto',
                shade: false,
                area: xxArea,
                title: '代码编辑器',
                resize: true,
                cancel: () => { // 关闭事件

                }
            })
        },
        openNote() {
            const xxArea = ['50%', '70%']
            this.$layer.iframe({
                content: {
                    content: Note, // 传递的组件对象
                    parent: this, // 当前的vue对象
                    data: {
                        note: '测试桌面笔记'
                    }// props
                },
                offset: 'auto',
                shade: false,
                area: xxArea,
                title: '笔记本',
                resize: true,
                cancel: () => { // 关闭事件

                }
            })
        },
        dockInit() {
            document.querySelectorAll('.dock li').forEach(li => {
                li.addEventListener('click', e => {
                    e.currentTarget.classList.add('loading')
                    const ele = e.currentTarget
                    setTimeout(() => {
                        console.log(ele)
                        ele.classList.remove('loading')
                    }, 1000)
                })
                li.addEventListener('mousemove', e => {
                    const item = e.target
                    const itemRect = item.getBoundingClientRect()
                    const offset = Math.abs(e.clientX - itemRect.left) / itemRect.width
                    const prev = item.previousElementSibling || null
                    const next = item.nextElementSibling || null
                    const scale = 0.6
                    this.resetScale()
                    if (prev) {
                        prev.style.setProperty('--scale', 1 + scale * Math.abs(offset - 1))
                    }
                    item.style.setProperty('--scale', 1 + scale)
                    if (next) {
                        next.style.setProperty('--scale', 1 + scale * offset)
                    }
                })
            })
            document.querySelector('.dock').addEventListener('mouseleave', () => {
                this.resetScale()
            })
        },
        resetScale() {
            document.querySelectorAll('.dock li').forEach(li => {
                li.style.setProperty('--scale', 1)
            })
        }
    }
}
</script>

<style scoped>
/* body {
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  align-items: flex-end;
  background-image: linear-gradient( 109.6deg,  rgba(25,170,209,1) 11.3%, rgba(21,65,249,1) 69.9% );
} */

.glass {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 8rem;
  background: rgba( 255, 255, 255, 0.25 );
  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
  backdrop-filter: blur( 4px );
  -webkit-backdrop-filter: blur( 4px );
  border: 1px solid rgba( 255, 255, 255, 0.18 );
  display: flex;
  justify-content: center;
}

.dock {
  --scale: 1;

  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dock li {
  font-size: calc(6rem * var(--scale));
  padding: 0 .5rem;
  cursor: default;

  position: relative;
  top: calc((6rem * var(--scale) - 6rem) / 2 * -1);

  transition: 15ms all ease-out;
}

.dock li.loading {
  animation: 1s loading ease-in infinite;
}

@keyframes loading {
  0%, 100% {
    transform: translateY(0px);
  }
  60% {
    transform: translateY(-40px);
  }
}
</style>
